<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
	<th:block data-th-replace="/adminlte/base::base-head"></th:block>
	<link href="https://cdn.bootcss.com/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
	<link href="/plugins/cropper/cropper.min.css" rel="stylesheet">
	<link href="/admin/css/sitelogo.css" rel="stylesheet">
</head>

<body class="hold-transition sidebar-mini layout-fixed">
	<div class="modal fade" id="dialog-account-edit">
		<div class="modal-dialog">
			<div class="modal-content" style="border-radius: 5px; margin-top: 10%; border-radius: 5px;">
				<div class="modal-header">
					<h4 class="modal-title">修改密码</h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<form action="/accounts/" method="put" data-action="id" data-dialog-close="#dialog-account-edit">
					<div class="modal-body">
						<div class="form-group">
							<label><span class="text-red">*</span> 用户名</label> <label data-t="username"
								class="form-control"></label>
						</div>
						<div class="form-group">
							<label><span class="text-red">*</span> 用户密码</label> <input data-v="password" type="text"
								class="form-control" maxlength="32" name="password" placeholder="用户密码"
								required="required">
						</div>
					</div>
					<div class="modal-footer">
						<button class="btn btn-default float-left" data-dismiss="modal" style="width: 100px"
							type="button">取消
						</button>
						<button class="btn btn-success float-right" style="width: 100px" type="submit">确定
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="modal fade" id="dialog-image-edit">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<form class="avatar-form">
					<div class="modal-header">
						<h4 class="modal-title">上传头像</h4>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="modal-body">
						<div class="avatar-body">
							<div class="avatar-upload">
								<input class="avatar-src" name="avatar_src" type="hidden">
								<input class="avatar-data" name="avatar_data" type="hidden">
								<label for="avatarInput" style="line-height: 35px;">图片上传</label>
								<button class="btn btn-danger" type="button" style="height: 35px;"
									onclick="$('input[id=avatarInput]').click();">请选择图片</button>
								<span id="avatar-name"></span>
								<input class="avatar-input" style="display: none;" id="avatarInput" name="avatar_file"
									type="file">
							</div>
							<div class="row">
								<div class="col-md-9">
									<div class="avatar-wrapper"></div>
								</div>
								<div class="col-md-3">
									<div class="avatar-preview preview-lg" id="imageHead"></div>
								</div>
							</div>
							<div class="row avatar-btns" style="height: 35px;">
								<div class="col-md-5">
									<div class="btn-group">
										<button class="btn btn-danger fa fa-undo-alt" data-method="rotate" data-option="-90"
											type="button" title="Rotate -90 degrees"> 向左旋转</button>
									</div>
									<div class="btn-group">
										<button class="btn  btn-danger fa fa-redo-alt" data-method="rotate" data-option="90"
											type="button" title="Rotate 90 degrees"> 向右旋转</button>
									</div>
								</div>
								<div class="col-md-4" style="text-align: right;">
									<button class="btn btn-danger fa fa-arrows-alt" data-method="setDragMode"
										data-option="move" type="button" title="移动">
										<span class="docs-tooltip" data-toggle="tooltip" title=""
											data-original-title="$().cropper('setDragMode', 'move')">
										</span>
									</button>
									<button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom"
										data-option="0.1" title="放大图片">
										<span class="docs-tooltip" data-toggle="tooltip" title=""
											data-original-title="$().cropper('zoom', 0.1)">
											<!--<span class="fa fa-search-plus"></span>-->
										</span>
									</button>
									<button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom"
										data-option="-0.1" title="缩小图片">
										<span class="docs-tooltip" data-toggle="tooltip" title=""
											data-original-title="$().cropper('zoom', -0.1)">
											<!--<span class="fa fa-search-minus"></span>-->
										</span>
									</button>
									<button type="button" class="btn btn-danger fa fa-sync-alt" data-method="reset"
										title="重置图片">
										<span class="docs-tooltip" data-toggle="tooltip" title=""
											data-original-title="$().cropper('reset')"
											aria-describedby="tooltip866214">
										</span></button>
								</div>
								<div class="col-md-3">
									<button class="btn btn-danger btn-block avatar-save far fa-save" type="button"
										data-dismiss="modal"> 保存修改</button>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="wrapper">
		<th:block data-th-replace="/adminlte/base::base-navbar"></th:block>
		<th:block data-th-replace="/adminlte/base::base-main-sidebar"></th:block>
		<div class="content-wrapper">
			<div class="content-header">
				<div class="container-fluid">
					<div class="row mb-2">
						<div class="col-sm-6">
							<h1 class="m-0 text-dark">用户信息</h1>
						</div>
						<div class="col-sm-6">
							<ol class="breadcrumb float-sm-right">
								<li class="breadcrumb-item"><a href="#"> 用户相关</a></li>
								<li class="breadcrumb-item"><a href="/admin/user"> 用户管理</a></li>
								<li class="breadcrumb-item active">用户信息</li>
							</ol>
						</div>
					</div>
				</div>
			</div>
			<section class="content">
				<div class="container-fluid">
					<div class="card">
						<div class="card-header row">
							<div class="col-sm-6">
								<label class="card-title" th:utext="${'用户ID： '+target.id}">用户账号：</label>
							</div>
							<div class="col-sm-6" th:with="account=${accountUtils.getByUserId(target.id)}">
								<a title="修改" class="float-sm-right" data-dialog="show" data-url="#dialog-account-edit"
									th:data-dialog-action-id="${account.id}"
									th:data-dialog-t-username="${account.username}"> <i class="fas fa-edit text-blue"
										style="margin-left: 10px;"></i>
									修改密码
								</a>
								<a title="修改" class="float-sm-right" th:href="${'/admin/user/safe/'+target.id}"> <i
										class="fas fa-user-shield text-blue" style="margin-left: 10px;"></i>
									安全信息
								</a>
							</div>
						</div>

						<form class="form-horizontal" th:action="${'/users/'+target.id}" method="put">
							<div class="card-body">
								<div class="form-group">
									<label class="col-auto control-label" style="margin-top: 10px">头像</label>
									<div class="col-auto">
										<img id="userImage" name="image"
											th:src="${StringUtils.isNotEmpty(target.image)?target.image:'/admin/dist/img/user3-128x128.jpg'}"
											class="img-circle" alt="User Image"
											style="width: 200px; height: 200px; object-fit: cover; cursor: pointer;"
											onclick="$('#dialog-image-edit').modal('show');" />
										<p class="help-block">支持JPG/PNG/GIF格式，小于5MB</p>
									</div>
								</div>
								<div class="form-group">
									<label class="col-auto control-label">姓名</label>
									<div class="col-auto">
										<input type="text" class="form-control" name="name" placeholder="姓名"
											autofocus="autofocus" th:value="${target.name}">
									</div>
								</div>
								<div class="form-group">
									<label class="col-auto control-label"><span class="text-red">*</span> 昵称</label>
									<div class="col-auto">
										<input type="text" class="form-control" name="nickname" required="required"
											placeholder="昵称" th:value="${target.nickname}">
									</div>
								</div>
								<div class="form-group">
									<label class="col-auto control-label">性别</label>
									<div class="col-auto" th:object="${target.gender}">
										<label class="col-auto control-label" style="text-align: left;"> <input
												type="radio" name="gender" class="minimal" style="margin-right: 5px"
												value="1" th:checked="${target.gender.value == 1}">男
										</label> <label class="col-auto control-label" style="text-align: left;"> <input
												type="radio" name="gender" class="minimal" style="margin-right: 5px"
												value="2" th:checked="${target.gender.value == 2}">女
										</label>
									</div>
								</div>
								<div class="form-group">
									<label class="col-auto control-label">生日</label>
									<div class="col-auto">
										<div class="input-group date">
											<div class="input-group-prepend">
												<span class="input-group-text"><i class="far fa-clock"></i></span>
											</div>
											<input type="datetime" name="birth" class="form-control float-right"
												id="datepicker" th:value="${target.birth}">
										</div>
									</div>
								</div>
								<div class="form-group">
									<label class="col-auto control-label">地址</label>
									<div class="col-auto">
										<input type="text" name="address" class="form-control" placeholder="地址"
											th:value="${target.address}">
									</div>
								</div>
								<div class="form-group">
									<label class="col-auto control-label">个人介绍</label>
									<div class="col-auto">
										<textarea class="form-control" name="introduction" rows="5" placeholder="个人介绍"
											th:utext="${target.introduction}"></textarea>
									</div>
								</div>
								<div class="row justify-content-center">
									<button type="submit" class="btn btn-info" style="width: 200px">保存</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</section>
		</div>
		<th:block data-th-replace="/adminlte/base::base-footer"></th:block>
		<th:block data-th-replace="/adminlte/base::base-control-sidebar"></th:block>
	</div>
	<script src="https://cdn.bootcss.com/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
	<script src="/kaibes/js/file.js"></script>
	<script src="/admin/js/user-edit.js"></script>
	<script src="/plugins/cropper/cropper.js"></script>
	<script src="/plugins/html2canvas/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/admin/js/sitelogo.js"></script>
	<script type="text/javascript">
		//做个下简易的验证  大小 格式
		$('#avatarInput').on('change', function (e) {
			var filemaxsize = 1024 * 5;//5M
			var target = $(e.target);
			var file = target[0].files[0];
			
			var Size = file.size / 1024;
			if (Size > filemaxsize) {
				$('#dialog-image-edit').modal('hide');
				toast.warning('图片过大，请重新选择!', ()=>{
					$('#dialog-image-edit').modal('show');
				});
				return true;
			}
			
			if (!file.type.match(/image.*/)) {
				toast.warning('请选择正确的图片!');
			} else {
				console.info(file.type);
				if (file.type == 'image/gif') {
					$('#dialog-image-edit').modal('hide')
					save2Id(file, 'userImage');
				} else {
					var filename = document.querySelector("#avatar-name");
					var texts = document.querySelector("#avatarInput").value;
					var teststr = texts; //你这里的路径写错了
					testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
					filename.innerHTML = testend;
				}
			}
		});
		$(".avatar-save").on("click", function () {
			// 截图小的显示框内的内容
			html2canvas(document.getElementById('imageHead')).then(canvas => {
					//生成base64图片数据
					var dataUrl = canvas.toDataURL("image/jpeg");
					$("#userImage").attr("src", dataUrl);
					$("#avatarInput").val("");
		    });
		})
	</script>
</body>

</html>